<div class='parent'>
    <label for='hy'><strong>Angular-specific example.</strong> Fancy some <code>ngFor</code>?</label>
    <div class='wrapper'>
        <div class='container' [dragula]='"another-bag"' [dragulaModel]='many'>
            <div *ngFor='let text of many' [innerHtml]='text'></div>
        </div>
        <div class='container' [dragula]='"another-bag"' [dragulaModel]='many2'>
            <div *ngFor='let text of many2' [innerHtml]='text'></div>
        </div>
    </div>
    <div class='wrapper'>
        <div class='container'>
            <pre>{{many | json}}</pre>
        </div>
        <div class='container'>
            <pre>{{many2 | json}}</pre>
        </div>
    </div>
    <pre>
      <code>
&lt;div class='wrapper'&gt;
  &lt;div class='container' [dragula]='&quot;another-bag&quot;' [dragulaModel]='many'&gt;
    &lt;div *ngFor='let text of many' [innerHtml]='text'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='container' [dragula]='&quot;another-bag&quot;' [dragulaModel]='many2'&gt;
    &lt;div *ngFor='let text of many2' [innerHtml]='text'&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

class RepeatExample &#123;
  public many: Array&lt;string&gt; = ['The', 'possibilities', 'are', 'endless!'];
  public many2: Array&lt;string&gt; = ['Explore', 'them'];

  constructor(private dragulaService: DragulaService) &#123;
    dragulaService.dropModel.subscribe((value) => &#123;
      this.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value) => &#123;
      this.onRemoveModel(value.slice(1));
    });
  }

  private onDropModel(args) &#123;
    let [el, target, source] = args;
    // do something else
  }

  private onRemoveModel(args) &#123;
    let [el, source] = args;
    // do something else
  }
}
      </code>
    </pre>
</div>